<template>
  <div class="report-detail">
    <div id="map"></div>
    <div class="detail-panel">
      <div class="panel-header">
        <div style="margin-left:10px">详情</div>
        <div style="margin-right:10px">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="panel-body">
        <div class="table-name">变化趋势列表</div>
        <el-table :data="tableData" style="width: 100%" size="mini">
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
        </el-table>
        <div class="table-name">图版详情</div>
        <el-table :data="tableData" style="width: 100%" size="mini">
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]

    };
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.report-detail {
  position: relative;
  height: 100%;
  width: 100%;
  #map {
    height: 100%;
    width: 100%;
  }
  .detail-panel {
    position: absolute;
    top: 50px;
    left: 30px;
    height: 450px;
    width: 700px;
    outline: 1px solid;
    .panel-header {
      height: 10%;
      background-color: slategray;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .panel-body {
      padding: 10px;
      .table-name {
        margin: 5px 0;
        font-size: 18px;
      }
    }
  }
}
</style>